<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_medium'"
      :append-to-body="true"
      :title="dataList.SettingRegulation"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="dataList.CalibrationObject"
            prop="calibrationObject"
          >
            <el-input
              v-model="form.calibrationObject"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item :label="dataList.CalibrationWay" prop="calibrationWay">
            <el-input v-model="form.calibrationWay" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DeviceCalibrationSettingDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      innerDialogFormVisible: false,
      form: {
        calibrationObject: "",
        calibrationWay: "",
      },
      rules: {
        calibrationObject: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        calibrationWay: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.form.calibrationObject = this.rowData.calibrationObject;
    this.form.calibrationWay = this.rowData.calibrationWay;

    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:rowData", {
        calibrationObject: "",
        calibrationWay: "",
      });
    },
    closeDialog() {
      this.cancel();
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("settingDialogClose", this.form);
          this.cancel();
        }
      });
    },
  },
};
</script>
